<template>
    <canvas id="canvasOutput"></canvas>
    <img alt="logo" class="logo" src="./assets/electron.svg" />
    <div class="creator">Powered by electron-vite1</div>
    <div class="text">
      Build an Electron app with
      <span class="vue">Vue</span>
    </div>
    <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
    <div class="actions">
      <div class="action">
        <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
      </div>
      <div class="action">
        <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
      </div>
    </div>
    <Versions />
</template>

<script setup>
import { onMounted } from 'vue';
import Versions from './Versions.vue'

const imread = (src) => {
  return new Promise((resolve) => {
    let img = new Image()
    img.src = src
    img.onload = () => {
      let mat = cv.imread(img)
      resolve(mat)
    }
  })
}

const cvTest = async () => {
  let img = await imread('./assets/house.jpg')
  let mask = await imread('./assets/mask.jpg')
  let mask_gray = new cv.Mat()
  cv.cvtColor(mask, mask, cv.COLOR_RGB2GRAY)
  cv.threshold(mask, mask, 170, 255, cv.THRESH_BINARY)
  let dst = new cv.Mat()
  cv.bitwise_and(img, img, dst, mask)
  cv.imshow('canvasOutput', dst)
}

const init = () => {
  cvTest()
  console.log(Module)
}

onMounted(init)

const ipcHandle = () => {
  window.electron.ipcRenderer.send('ping')
}

</script>

